import React, {Component} from 'react';
import {Form,Row, Col, Icon, Layout, Input, Button,Radio} from 'antd';
let {Content} = Layout;
const FormItem = Form.Item;
import HeaderMin from './HeaderMin'
import FooterMin from './FooterMin'

const formItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 6},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 14},
  },
};

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Num: 1597
    };
  }

  handleSubmit() {
  };

  changeNum(){
    let tempNum =Math.floor(Math.random()*10000);
    this.setState({
      Num:tempNum
    })
  }
  render() {
    const {getFieldDecorator} = this.props.form;
    return (
      <Layout className="layout" style={{minWidth: '1600px'}}>
        <HeaderMin/>
        <Content style={{minHeight: '700px',backgroundColor:'#f4f4f4'}}>

        <Row type="flex" justify="center">
            <Col span={12} style={{background: 'white', padding: '1%', marginTop: '3%'}}>
              <h1 style={{color:'#1676be',fontSize:'30px'}}>登入</h1>

              <Form onSubmit={this.handleSubmit} className="login-form">

                <FormItem
                  {...formItemLayout}
                  label={<b>用户昵称：</b>}
                  hasFeedback
                >
                  {getFieldDecorator('payType', {
                    rules: [{
                      required: true, message: '请输入用户昵称',
                    }],
                  })(
                    <Input prefix={<Icon type="user" style={{fontSize: 13}}/>} placeholder="请输入用户昵称"/>
                  )}
                </FormItem>

                <FormItem
                  {...formItemLayout}
                  label={<b>密码：</b>}
                  hasFeedback
                >
                  {getFieldDecorator('payType', {
                    rules: [{
                      required: true, message: '请输入密码',
                    }],
                  })(
                    <Input prefix={<Icon type="user" style={{fontSize: 13}}/>} placeholder="请输入密码"/>
                  )}
                </FormItem>

                <FormItem
                  {...formItemLayout}
                  label={<b>验证码：</b>}
                  hasFeedback
                >
                  {getFieldDecorator('accountDouble', {
                    rules: [{
                      required: true, message: '请输入短信验证码',
                    }],
                  })(

                    <Input style={{width:'70%'}} addonAfter={<Button  onClick={e=>(this.changeNum())}>{this.state.Num}</Button>}  prefix={<Icon type="user" style={{fontSize: 13}}/> } placeholder="请输入验证码"/>
                  )}
                </FormItem>

                <FormItem style={{textAlign:'center'}}>
                  <Button
                    type="primary"
                    htmlType="submit"
                    style={{width: '25%'}}
                  >
                    登入
                  </Button>
                </FormItem>

              </Form>
            </Col>
          </Row>
        </Content>
        <Row style={{marginTop:'1%'}}>
          <FooterMin />
        </Row>
      </Layout>
    );
  }
}
export default Form.create()(Login);
